<template>
   <WidgetForm ref="widgetFormRef" :form-fields="dialog.formFields" :option="{
                      businessName: '设备',
                      formLabelWidth: '80px'
                    }"/>
</template>
<script setup lang="ts">
import {defineEmits, defineExpose, defineProps, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref} from "vue";
import {WidgetFormField} from "@/model/Definition";
// import ScreenApi from "@/api/queue/ScreenApi";
import WidgetForm from "@/components/widget/WidgetForm.vue";
import ScreenApi from "@/api/queue/ScreenApi";
import RegItemApi from "@/api/queue/RegItemApi";

const winSizeArr = ["400x520", "1000x800"]

  const props = defineProps({
    field: {
      type: Object,
      required: false,
      default: null
    }
  })

  const dialog = reactive<{formFields: WidgetFormField[]}>({
    formFields: [
      {
        field: 'screenId',
        label: '显示界面',
        type: 'select',
        placeholder: '请选择要显示的界面',
        options: [],
        // config: {
        //   select: {
        //     filterable: true, remote: true,
        //     remoteShowSuffix: true, remoteMethod: (searchKey: string)=> getScreenList(searchKey)
        //   }
        // },
        config: {
          select: {
            clearable: true
          }
        },
        atChange: (val) => {
          const screenIdFieldIndex = dialog.formFields.findIndex(item => item.field === 'screenId')
          const screen = dialog.formFields[screenIdFieldIndex].options.find(item => item.value === val)
          const screeNameFieldIndex = dialog.formFields.findIndex(item => item.field === 'screenName')
          dialog.formFields[screeNameFieldIndex].initVal = screen.label
          widgetFormRef.value.setFieldValue('screenName', screen.label);
        }
      },{
        field: 'screenName',
        label: '显示界面',
        hide: true,
        type: 'text'
      }, {
        field: 'isNeedLogin',
        label: '需要登录',
        type: 'radioGroup',
        initVal: 0,
        options: [{label: '是', value: 1}, {label: '否', value: 0}]
      },{
        field: 'isFullScreen',
        label: '是否全屏',
        type: 'radioGroup',
        initVal: 0,
        options: [{label: '是', value: 1}, {label: '否', value: 0}]
      },
      {
        field: 'isFadeOut',
        label: '窗口滑出',
        type: 'radioGroup',
        initVal: 0,
        options: [{label: '是', value: 1}, {label: '否', value: 0}]
      }, {
        field: 'buttons',
        label: '窗口按钮',
        type: 'checkboxGroup',
        initVal: [],
        options: [{label: '置顶', value: 'top'},{label: '精简版', value: 'sample'}, {label: '最小化', value: 'min'}, {label: '最大化', value: 'max'}, {label: '关闭', value: 'close'},]
      }, {
        field: 'winSize',
        label: '窗口大小',
        type: 'select',
        initVal: 0,
        config: {
          select: {
            clearable: true
          }
        },
        options: winSizeArr.map(item => Object.assign({label: item, value: item}))
      }, {
        field: 'relateItem',
        label: '关联科目',
        type: 'select',
        hide: true,
        config: {
          select: {
            filterable: true,
            clearable: true
          }
        },
        required:[
          {required: true, message: "取号机关联科目为必填项", validator: 'change'}
        ],
        options: [],
        atChange: (val, field) => {
          const relateItemField = dialog.formFields.find(item => item.field === 'relateItem')
          const select: any = relateItemField.options.find(item => item.value === val)
          const relateDeptField = dialog.formFields.find(item => item.field === 'relateDept')
          relateDeptField.initVal = select.deptId;
          widgetFormRef.value.setFieldValue('relateDept', select.deptId);
        }
      }, {
        field: 'relateDept',
        label: '关联科室',
        type: 'text',
        hide: true
      }, {
        field: 'itemIds',
        label: '关联科目',
        type: 'select',
        hide: true,
        config: {
          select: {
            filterable: true,
            clearable: true,
            multiple: true
          }
        },
        options: [],
      }, {
        field: 'deptIds',
        label: '关联科室',
        type: 'select',
        hide: true,
        config: {
          select: {
            filterable: true,
            clearable: true,
            multiple: true
          },
        },
        options: [],
      },
    ]
  })

  const $emit = defineEmits({})

  const widgetFormRef = ref()


  onBeforeMount(() => {
    getScreenList()
    getDeptItemList()
    getItemList()
    getDeptList()
  })


  const getDeptItemList = () => {
    RegItemApi.listAllRegItem().then((data) => {
      const relateItemFieldIndex = dialog.formFields.findIndex(item => item.field === 'relateItem')
      dialog.formFields[relateItemFieldIndex].options = data.map(item => Object.assign({
        label: item.name + `(${item.deptName})`,
        key: item.id,
        deptId: item.deptId,
        value: item.id,
      }))
    }, (err) => {})
  }

const getItemList = () => {
  RegItemApi.listAllRegItem().then((data) => {
    const relateItemFieldIndex = dialog.formFields.findIndex(item => item.field === 'itemIds')
    dialog.formFields[relateItemFieldIndex].options = data.map(item => Object.assign({
      label: item.name,
      key: item.id,
      value: item.id,
    }))
  }, (err) => {})
}

const getDeptList = () => {
  RegItemApi.listAllRegItem().then((data) => {
    const relateItemFieldIndex = dialog.formFields.findIndex(item => item.field === 'deptIds')
    dialog.formFields[relateItemFieldIndex].options = data.map(item => Object.assign({
      label: item.deptName,
      key: item.deptId,
      value: item.deptId,
    }))
  }, (err) => {})
}

  const getScreenList = () => {
    ScreenApi.listScreen().then((data) => {
      const pageUrlFieldIndex = dialog.formFields.findIndex(item => item.field === 'screenId')
      dialog.formFields[pageUrlFieldIndex].options = data.map(item => Object.assign({
         label: item.name,
         key: item.code,
         value: item.id,
       }))
    })
  }

  const initFormData = (data) => {
    let configObj = null
    if (data && data[props.field.field]) {
      configObj = JSON.parse(data[props.field.field])
    }
    widgetFormRef.value.initFormData(configObj)
  }

  const resetFields = () => {
    widgetFormRef.value.resetFields()
  }

  const getFormFieldValue = () => {
    const formField = widgetFormRef.value.getFormFieldValue()
    console.log('get form filed value:::', formField)
    const result = {}
    result[props.field.field] = JSON.stringify(formField)
    return result
  }

  const showOrHideField = (field: string, isHide: boolean) => {
    const fieldIndex = dialog.formFields.findIndex(item => item.field === field)
    dialog.formFields[fieldIndex].hide = !!isHide
  }

  defineExpose({
    resetFields,
    initFormData,
    getFormFieldValue,
    showOrHideField
  })

</script>
<style scoped lang="scss">

</style>